<template>
  <v-group
    :config="{
      x,
      y,
      width,
      height,
    }"
    @transformend="transformend"
  >
    <v-rect
      :config="{
        x: 0,
        y: 0,
        width,
        height,
        fill: '#ffffff',
        opacity: 0.3,
        name,
        id,
      }"
    />
    <template v-if="frameSize > 0">
      <v-line v-for="(item, i) in lines" :key="i" :config="item" />
    </template>
    <slot />
  </v-group>
</template>

<script>
const lineProps = {
  closed: true,
  stroke: 'black',
  strokeWidth: 1,
  fill: 'white',
}
export default {
  name: 'Section',
  props: {
    x: {
      type: Number,
      default: 100,
    },
    y: {
      type: Number,
      default: 100,
    },
    width: {
      type: Number,
      default: 300,
    },
    height: {
      type: Number,
      default: 400,
    },
    frameSize: {
      type: Number,
      default: 0,
    },
    id: {
      type: String,
      default: 'default-id',
    },
    name: {
      type: String,
      default: '',
    },
  },
  data() {
    console.log(this.$slots, '===slots')
    return {}
  },
  computed: {
    lines() {
      const { width, height, frameSize } = this
      return [
        {
          ...lineProps,
          points: [
            0,
            0,
            width,
            0,
            width - frameSize,
            frameSize,
            frameSize,
            frameSize,
          ],
        },
        {
          ...lineProps,
          points: [
            0,
            0,
            frameSize,
            frameSize,
            frameSize,
            height - frameSize,
            0,
            height,
          ],
        },
        {
          ...lineProps,
          points: [
            0,
            height,
            frameSize,
            height - frameSize,
            width - frameSize,
            height - frameSize,
            width,
            height,
          ],
        },
        {
          ...lineProps,
          points: [
            width,
            0,
            width,
            height,
            width - frameSize,
            height - frameSize,
            width - frameSize,
            frameSize,
          ],
        },
      ]
    },
  },
  methods: {
    transformend(e) {
      this.$emit('transformend', e)
    },
    transform(e) {
      // this.$emit('transformend', e)
    },
  },
}
</script>

<style>
.dx-video-wrap {
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
}
.dx-video {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100%;
  height: 100%;
  background: #000;
  transform: translate(-50%, -50%);
}
</style>
